<template>
	<view class="container">
		<uv-navbar title="支付" :titleStyle="{'font-weight': '700','font-size': '18px'}" :autoBack="true" :placeholder="true"
			:safeAreaInsetTop="true"></uv-navbar>

		<view class="orderNum">订单编号：{{ planInfo.orderNum }}</view>

		<view class="activityName">
			<view class="activity-message-item">
				<view class="flex-between-start">
					<view class="title">活动名称: {{ planInfo.name }}</view>
					<view class="flex-between-start">
						<view class="price">￥{{ planInfo.price }}</view>
						<view class="price" style="color: black;">/人</view>
					</view>
				</view>
				<view class="total">共1件 小计 ￥{{ planInfo.price }}</view>
			</view>
		</view>

		<view class="payType" v-show="isWeChat" @click="choosePay">
			<view class="way">支付方式</view>
			<view class="card-list">
				<view class="weixin" :style="{background:isWeChat&&chooseWe?'#43C93E':''}" @click="chooseWe=true">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
						<g clip-path="url(#clip0_765_1368)">
							<path
								d="M9.15345 14.5337C7.71601 15.2957 7.50309 14.1059 7.50309 14.1059L5.70234 10.1089C5.00922 8.2096 6.30196 9.25213 6.30196 9.25213C6.30196 9.25213 7.41084 10.0501 8.25308 10.5367C9.09406 11.0232 10.0538 10.6795 10.0538 10.6795L21.8275 5.51101C19.6552 2.93943 16.0677 1.25874 12.0049 1.25874C5.37442 1.25874 0 5.73216 0 11.2513C0 14.4256 1.77926 17.2506 4.55113 19.0816L4.05198 21.815C4.05198 21.815 3.80809 22.613 4.65223 22.2427C5.22783 21.99 6.69496 21.0865 7.56816 20.5361C8.94115 20.9911 10.4367 21.2438 12.0049 21.2438C18.6348 21.2438 24.0099 16.7704 24.0099 11.2513C24.0099 9.65272 23.5568 8.14262 22.7544 6.80312C19.0032 8.94948 10.2775 13.9385 9.15345 14.5337Z"
								:fill="isWeChat&&chooseWe?'white':'#43C93E'" />
						</g>
						<defs>
							<clipPath id="clip0_765_1368">
								<rect width="24" height="24" fill="white" />
							</clipPath>
						</defs>
					</svg>
					<text class="wx-name">微信支付</text>
				</view>
				<view class="weixin" :style="{background:isWeChat&&!chooseWe?'#0199e5':''}" @click="chooseWe=false">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
						<path :fill="isWeChat&&!chooseWe?'white':'#0199e5'"
							d="M19.695 15.07c3.426 1.158 4.203 1.22 4.203 1.22V3.846c0-2.124-1.705-3.845-3.81-3.845H3.914C1.808.001.102 1.722.102 3.846v16.31c0 2.123 1.706 3.845 3.813 3.845h16.173c2.105 0 3.81-1.722 3.81-3.845v-.157s-6.19-2.602-9.315-4.119c-2.096 2.602-4.8 4.181-7.607 4.181c-4.75 0-6.361-4.19-4.112-6.949c.49-.602 1.324-1.175 2.617-1.497c2.025-.502 5.247.313 8.266 1.317a16.8 16.8 0 0 0 1.341-3.302H5.781v-.952h4.799V6.975H4.77v-.953h5.81V3.591s0-.409.411-.409h2.347v2.84h5.744v.951h-5.744v1.704h4.69a19.5 19.5 0 0 1-1.986 5.06c1.424.52 2.702 1.011 3.654 1.333m-13.81-2.032c-.596.06-1.71.325-2.321.869c-1.83 1.608-.735 4.55 2.968 4.55c2.151 0 4.301-1.388 5.99-3.61c-2.403-1.182-4.438-2.028-6.637-1.809" />
					</svg>
					<text class="wx-name">支付宝支付</text>
				</view>
			</view>
		</view>

		<view class="payType" v-show="!isWeChat">
			<view class="way">支付方式</view>
			<view>
				<view class="weixin" :style="{background:!isWeChat?'#0199e5':''}">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
						<path fill="white"
							d="M19.695 15.07c3.426 1.158 4.203 1.22 4.203 1.22V3.846c0-2.124-1.705-3.845-3.81-3.845H3.914C1.808.001.102 1.722.102 3.846v16.31c0 2.123 1.706 3.845 3.813 3.845h16.173c2.105 0 3.81-1.722 3.81-3.845v-.157s-6.19-2.602-9.315-4.119c-2.096 2.602-4.8 4.181-7.607 4.181c-4.75 0-6.361-4.19-4.112-6.949c.49-.602 1.324-1.175 2.617-1.497c2.025-.502 5.247.313 8.266 1.317a16.8 16.8 0 0 0 1.341-3.302H5.781v-.952h4.799V6.975H4.77v-.953h5.81V3.591s0-.409.411-.409h2.347v2.84h5.744v.951h-5.744v1.704h4.69a19.5 19.5 0 0 1-1.986 5.06c1.424.52 2.702 1.011 3.654 1.333m-13.81-2.032c-.596.06-1.71.325-2.321.869c-1.83 1.608-.735 4.55 2.968 4.55c2.151 0 4.301-1.388 5.99-3.61c-2.403-1.182-4.438-2.028-6.637-1.809" />
					</svg>
					<text class="wx-name" style="color: white;">支付宝支付</text>
				</view>
			</view>
		</view>


		<view class="footer-card">
			<view class="footer-num">合计：￥{{ planInfo.price }}</view>
			<view class="footer-pay-btn">
				<uv-button type="error" size="normal" shape="circle" text="支付" :disabled="btnDis" :loading="btnLoad"
					@click="toPay()"></uv-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		activityDetail,
		setPay
	} from '@/api/school';
	import {
		baseUrl
	} from '../../config';
	export default {
		data() {
			return {
				orderNum: this.generateRandomNumber(),
				btnDis: false,
				btnLoad: false,
				terId: '', // 临时id
				planInfo: {},
				isWeChat: false,
				chooseWe: true,
				baseUrlVal: '',
			}
		},
		onLoad(e) {
			const user_info = uni.getStorageSync('stu_info')
			if (user_info == '') {
				this.$tab.reLaunch('/')
			}

			if (e) {
				this.terId = e.id
				this.getDetail(e.id)
			} else {
				this.$modal.msg('参数错误')
			}

			if (this.isWeChatBrowser()) {
				this.isWeChat = true
			} else {
				this.isWeChat = false
			}
			// console.log(baseUrl);
			this.baseUrlVal = baseUrl.replace('school', 'h5')
		},
		methods: {
			isWeChatBrowser() {
				const ua = navigator.userAgent.toLowerCase();
				return ua.indexOf('micromessenger') !== -1;
			},
			generateRandomNumber() {
				const randomPart = Math.floor(Math.random() * 1e10).toString().padStart(10, '0');
				return '83' + randomPart;
			},
			getDetail() {
				const data = {
					id: this.terId,
				}
				activityDetail(data).then(res => {
					this.planInfo = res.data
				})
			},
			toPay() {
				if (parseFloat(this.planInfo.price) > 0) {
					const baseUrlValue = this.baseUrlVal
					const data = {
						stu_id: uni.getStorageSync('stu_info').stuId,
						plan_id: this.terId,
						browser_flag: this.isWeChat && this.chooseWe ? 'wechat' : 'no_wechat',
						return_url: `${baseUrlValue}/#/pages/pay/payStatus?id=${this.terId}&browserFlag=${this.isWeChat && this.chooseWe ? 'wechat' : 'no_wechat'}`
					}
					this.btnDis = true
					this.btnLoad = true

					setTimeout(() => {
						setPay(data).then(res => {
							this.btnDis = false
							this.btnLoad = false

							setTimeout(() => {
								if (res.status == 200) {
									window.location.href = res.data.url;
								} else {
									this.$modal.msgError('支付未完成')
									window.location.href =
										`${baseUrlValue}/#/pages/pay/payStatus?id=${data.plan_id}&browserFlag=${data.browser_flag}`;
								}
							}, 1200)
						}).catch(err => {
							this.btnDis = false
							this.btnLoad = false
							this.$modal.msgError(err)

						})
					}, 1500)

				} else {
					this.$modal.msgError('支付信息异常')
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F0F2F5;
	}

	.flex-between-start {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}

	.container {
		.orderNum {
			padding: 40rpx 56rpx 40rpx 38rpx;
			margin-top: 20rpx;
			background-color: #ffffff;
			color: rgba(0, 0, 0, 0.80);
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}

		.activityName {
			padding: 40rpx 56rpx 0rpx 38rpx;
			margin-top: 20rpx;
			background-color: #ffffff;

			.title {
				color: rgba(0, 0, 0, 0.80);
				text-align: start;
				font-family: Inter;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
			}

			.price {
				color: #F00;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
			}
			
			.activity-message-item{
				display: flex;
				width: 375px;
				padding-bottom: 10px;
				flex-direction: column;
				gap: 15px;
				
				background: #FFF;
			}

			.total {
				color: #F00;
				text-align: right;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
			}
		}

		.payType {
			padding: 40rpx 56rpx 40rpx 38rpx;
			background-color: #ffffff;
			margin-top: 20rpx;

			.way {
				margin-bottom: 38rpx;
			}

			.card-list {
				display: grid;
				grid-template-columns: 1fr 1fr;
			}

			.weixin {
				display: flex;
				align-items: center;
				justify-content: start;
				padding: 1rem 1rem;
				margin: 1rem;
				border-radius: 0.5rem;
				background-color: #f7f6f6;

				.wx-name {
					margin-left: 10rpx;
				}
			}

		}


		.footer-card {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 38rpx;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.footer-num {
				color: #F00;
				font-size: 16px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
			}

			.footer-pay-btn {
				width: 30%;
			}
		}
	}
</style>